<template>
  <el-container v-loading="loading">

    <el-row>
      <el-button
        icon="fa fa-fw fa-refresh"
        size="mini"
        type="info"
        @click="handleRefresh">
      </el-button>
    </el-row>

    <el-table
      @selection-change="handleSelectionChange"
      :data="tableData"
      tooltip-effect="dark"
      border
      :default-sort="{prop: 'date', order: 'descending'}"
      :row-class-name="tableRowClassName"
      size="small">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        prop="name"
        label="等级名称">
      </el-table-column>

      <el-table-column
        prop="level"
        label="等级"
        sortable>
      </el-table-column>

      <el-table-column
        prop="grow"
        label="所需成长值"
        sortable>
      </el-table-column>

      <el-table-column
        prop="discount"
        label="折扣"
        sortable>
      </el-table-column>

      <el-table-column
        prop="icon"
        label="图标"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <img :src="scope.row.icon" class="logo-img">
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            circle
            icon="fa fa-fw fa-pencil"
            size="mini"
            type="primary"
            title="编辑"
            @click="handleEditItem(scope.$index, scope.row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="pagination.pageSizes"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

  </el-container>
</template>

<script>
  export default {
    mounted: function () {
      this.getData();
    },
    methods: {
      /**
       * 数据请求
       * */
      getData:function () {
        let _this = this;
        this.api.getUserLevelTabulation({page: this.pagination.currentPage, paginate: this.pagination.pageSize}).then(function (res) {
          if (res.code == 1) {
            _this.tableData = res.data.data;
            _this.pagination.total = res.data.total;
          }
          _this.loading = false;
        }).catch(function (res) {
          throw new Error(res);
        });
      },
      /**
       * 分页数改变
       */
      handleSizeChange:function (pageSize) {
        this.pagination.pageSize = pageSize;
        this.getData();
      },
      /**
       * 当前页面改变
       * @param currentPage
       */
      handleCurrentChange:function (currentPage) {
        this.pagination.currentPage = currentPage;
        this.getData();
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },
      /**
       * 编辑单个
       * */
      handleEditItem(index, row) {
        this.$router.push({
          name: 'AssociatorGradeEditor',
          params: {
            id: row.id,
            methodType: this.constant.EDITORMETHOD
          }
        })
      },
      /**
       * 数据刷新
       */
      handleRefresh:function () {
        this.getData();
        this.$message({
          showClose: true,
          message: '刷新成功',
          type: 'success'
        });
      },
      /**
       * 表格选中状态记录
       * @param val
       */
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    },
    data() {
      return {
        loading: true,  // 页面加载
        // tableData: [
        //   {
        //     id:'',                //类型：Number  必有字段  备注：无
        //     level:'',                //类型：Number  必有字段  备注：等级
        //     integral:'',                //类型：Number  必有字段  备注：所需积分
        //     name:'',                //类型：String  必有字段  备注：等级名称
        //     discount:'',                //类型：String  必有字段  备注：折扣
        //     icon:''                //类型：String  必有字段  备注：图标
        //   },
        // ],
        multipleSelection:[],
        pagination:{
          total: 5,
          currentPage:1,
          pageSize: 10,
          pageSizes:[5,10,20,25,30,50,100],
        },
      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-table, .el-row{
    width: 98% !important;
    margin: 15px auto;
  }
  .el-pagination{
    text-align: center;
    margin: 15px 0;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .logo-img{
    width: 40px;
    height: 40px;
  }
</style>
